/* 
 * theme.css
 * 提供医学影像查看器的视觉主题样式
 * 包含颜色、字体和视觉效果
 */

@import './variables.css';

/* 基础主题元素 */
body {
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-dark);
  margin: 0;
  padding: 0;
}

/* 页面容器主题 */
.viewer-page {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

/* 顶部工具栏主题 */
.viewer-header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* 面板主题 */
.series-panel {
  background-color: var(--bg-panel);
  border-right: 1px solid var(--border-color);
}

.ai-panel {
  background-color: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* 面板内容主题 */
.panel-header {
  border-bottom: 1px solid var(--border-light);
}

.panel-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 500;
}

/* 按钮主题 */
.tool-btn {
  background-color: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tool-btn:hover {
  background-color: var(--bg-hover);
}

.tool-btn.active {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

/* 信息显示区域主题 */
.corner-info {
  color: var(--text-primary);
  background-color: var(--bg-overlay);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

/* 图像信息覆盖层主题 */
.image-overlay {
  background-color: var(--bg-overlay);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border-light);
}

.series-description {
  font-weight: bold;
  color: var(--primary-color);
}

.image-count {
  color: var(--warning-color);
}

/* 缩放和窗宽窗位信息主题 */
.zoom-info, .wwwc-info {
  background-color: var(--bg-overlay);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  transition: opacity 0.3s ease;
}

/* 滑块主题 */
.image-slider-container {
  background-color: var(--bg-overlay);
  border-radius: var(--border-radius-md);
  border: none;
}

.slice-info {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Element UI 组件主题覆盖 */
.el-slider__runway {
  background-color: rgba(255, 255, 255, 0.3);
}

.el-slider__bar {
  background-color: var(--primary-color);
}

.el-slider__button {
  border: 2px solid var(--primary-color);
  background-color: var(--text-primary);
} 